El box model (modelo de caja en español) es un modelo de formato visual que se usa precisamente para renderizar un documento para medios visuales.
Básicamente es la idea de que cada en el árbol del DOM dibuja una caja.
Claro, no todos los elementos crean cajas de manera explícita, eso depende ti. Si tu no defines el tamaño de un elemento las cajas se autogeneran en base a las necesidades del plano.
Este concepto de cajas creadas alrededor de los objetos no es tan difícil de imaginar. Sin embargo…¿para qué hacer ese esfuerzo? Una imagen vale más que mil palabras.
Los outlines (contornos)
Probablemente el perrito llame más tu atención pero intenta enfocarte.
Cada elemento HTML en esta imágen esta rodeado de un caja con un color (si, se ve bastante feo, pero es solo para entender el ejemplo).
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>The Box Model</title>
</head>
<body>
<header class="header__container">
<h1 class="header__title">Lorem Ipsum</h1>
</header>
<section class="main__container">
<h1 class="main__title">Lorem Ipsum</h1>
<p class="main__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada dapibus eros, sollicitudin varius nibh fermentum nec. Nullam purus risus, dictum ac dapibus et</p>
<img src="https://picsum.photos/id/237/200/300" alt="Lorem Ipsum" class="main__banner">
<ol class="main__items-list">
<li class="main__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="main__item">Sed id urna et mi fringilla molestie quis id risus.</li>
<li class="main__item">Sed non lectus sodales, commodo ante a, malesuada massa.</li>
<li class="main__item">Morbi non mauris mollis, vestibulum felis at, venenatis nunc.</li>
<li class="main__item">Pellentesque varius est vel felis condimentum, eget imperdiet ex mattis.</li>
</ol>
</section>
</body>
</html>
styles.css
.header__container {
outline: 5px solid black;
}
.header__title {
outline: 3px solid aqua;
}
.main__container {
outline: 5px solid blue;
}
.main__title {
outline: 3px solid orange;
}
.main__paragraph {
outline: 3px solid purple;
}
.main__banner {
outline: 3px solid red;
}
.main__items-list {
outline: 3px solid pink;
}
.main__item {
outline: 1px solid green;
}
Como puedes ver en el archivo de estilos, para asignar los color simplemente se esta definiendo la propiedad de outline con tamaños variados y colores diferentes para diferenciarlos fácilmente.
*Si te preguntas porque es que todos los elementos tienen una clase asignada con un nombre en un formato extraño: nombre__nombre. Te recomiendo que aprendas acerca del formato BEM. (Si no te importa el inglés, revisalo en getbem.com)
outline para este ejemplo nos ayuda a visualizar el tamaño de la caja creada para cada elemento, no importa si es texto, una imagen o un contenedor incluso como header_container, main-container y main__items-list.
…
Un momento, hay un elemento que no sale. En los colores claramente hay una caja que debería ser de color aqua (la de header__title) y no hay tal caja en la imagen. ¿Qué ocurrió?
Para algunos será obvio, pero mejor que no haya confusiones. Si comentamos el estilo que nos crea la caja negra, es decir, el que corresponde a la clase de header__container, el archivo CSS quedará así:
styles.css
/* .header__container {
outline: 5px solid black;
} */
.header__title {
outline: 3px solid aqua;
}
.main__container {
outline: 5px solid blue;
}
.main__title {
outline: 3px solid orange;
}
.main__paragraph {
outline: 3px solid purple;
}
.main__banner {
outline: 3px solid red;
}
.main__items-list {
outline: 3px solid pink;
}
.main__item {
outline: 1px solid green;
}Y por ende la página ahora se verá así:
Era algo muy simple la caja de ambos elementos, header__container y header__title era del mismo tamaño y la primer ocultaba la caja inferior.
Las partes del box model
Ahora que ya viste una representación visual de la caja, puede ser que pienses que eso es todo. Pero no. Realmente no hemos visto el box model aún.
Pero demosle un vistazo rápido. Al abrir las herramientas de desarrollador.
*Las herramientas de desarrollador normalmente las puedes abrir con el atajo Ctrl+Shift+I
También puedes hacerlo abriendo el menú de tu navegador y buscando opciones que digan algo cómo “Herramientas” -> “Herramientas de Desarrollador“. (Estas opciones cambian ligeramente dependiendo del navegador, pero la idea es la misma)
Al ir a la pestaña de “Elementos” o “Elements” podrás ver la pantall dividad en 2, el lado izquierdo tiene los elementos HTML y el lado derecho tiene otro grupo de pestañas. “Estilos” o “Styles” muestra precisamente los estilos CSS que se han aplicado a cada elemento.
*Para aprender cómo es que se asignan estos valores de CSS (incluyendo los que no agregaste tu) te recomiendo leer acerca de La Cascada de CSS y de la Herencia en CSS. AGRWEGAR LIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIINK
En la parte inferior, abajo de los estilos encontrarás esta imagen:
*Dependiendo de tu pantalla y navegador a veces la sección del lado derecho se colocara abajo de los elementos HTML.
Esta caja representa el box model aplicado a cada elemento. Al darle click a cada elemento en la pestaña correspondiente verás como cambian estos valores de acuerdo a cada uno.
Como puedes ver, esta compuesta de 4 partes: content, padding, border y margin.
Veamos cada una:
Content (Contenido)
Esta es la parte azul, la mas pequeña en la imagen del box model.
El contenido denota precisamente el tamaño de lo que queremos mostrar, ya sea un texto, imagen, espacio, etc.
Veamos a nuestro perrito como ejemplo: content tiene por defecto el mismo tamaño que la imagen, 200×300. Es decir 200 píxeles de ancho y 300 píxeles de alto.
Sin embargo podemos modificar esto actualizando los estilos de main__banner, variando el tamaño de nuestro contenido a nuestro gusto.
styles.css
.main__banner {
outline: 3px solid red;
width: 400px;
height: 600px;
}
Si inspeccionas el box model de la imagen del perrito ahora verás que el navegador habrá actualizado la sección de content, reflejando el nuevo tamaño que especificamos.
Padding (Relleno)
La siguiente sección del box model es padding es el área entre el contenido y el borde. Pero no es visible por defecto ya que comúnmente solo se usa para precisamente incrementar el tamaño de un elemento o darle un espaciado sin modificar su contenido.
Como puedes ver en la imagen a diferencia de content, padding no tiene ningun valor. Cambiemos esto actualizando nuestro css:
styles.css
.main__banner {
outline: 3px solid red;
padding: 20px;
}
¿Ves la diferencia?
Se agrego un espacio blanco alrededor de la imagen. El contorno rojo que agregamos con outline rodea a todo el elemento y por ende sabemos que ese espacio blanco forma parte del mismo.
De igual manera en las herramientas de desarrollo podemos ver que se actualiza el box model de la imagen del perrito con el padding que le definimos: 20 píxeles de cada lado.
Border (Borde)
El borde que rodea la caja. Se puede usar para darle una apariencia estética al elemento.
¿Borde? ¿Pero qué no es eso lo que esta haciendo outline?
Si pero no son exactamente lo mismo. border delinea solamente el área de content y padding.
Mientras que el outline incluye a todo el elemento, incluyendo al border.
Es más fácil apreciar lo que esto significa agregando el border a los estilos:
styles.css
.main__banner {
outline: 3px solid red;
padding: 20px;
border: 5px solid green;
}
Como puedes ver la línea verde de border esta situada antes de la línea roja creada con outline.
Adicionalmente, así como content y padding se actualizan en el box model, también lo hace el border.
Margin (Margen)
El margen es la última parte del box model y sirve para denotar la separación entre este elemento y los demás elementos adyacentes.
styles.css
.main__banner {
outline: 3px solid red;
padding: 20px;
border: 5px solid green;
margin: 30px;
}
A lo mejor la diferencia no es tan evidente a primera vista…¿pero lo notas?
Si la respuesta es no. Intenta ver que tan cerca estan los textos de la imágen (del outline) antes y después de agregar la propiedad de margin.
El Box Model nos muestra como se estructura cada elemento HTML en la web. Fácil de entender, simple y extremedamente importante. Tan solo entender esto ya te hizo un mucho mejor desarrollador.
